<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin:0;
		padding: 0;
		text-decoration: none;
	}
	#father{
		height:527px ;
		width: 375px;
		/*border:1px solid gray;*/
		background-color: #F5F5F5 ;
		margin:0 auto;
		overflow-x: hidden;
		overflow-y: auto;
		position: relative;
	}
	#son{
		height:527px ;
		width: 375px;
		/*border:1px solid gray;*/
		background-color: #F5F5F5 ;
		margin:0 auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
	a{
		color: black;
	}
	button{
		margin:0px -15px;
		border-radius: 8px;
		background-color: #99b3cc;
		font-size: 12px;
	}
	span{
		margin: 15px 17%;
	}
	details{
		margin-top:20px;
	}
	input{
		width:40px;
		height: 30px;
		background-color: #F5F5F5;
		font-size: 15px;
		border-radius: 50%;
		margin: 5px 20px;
	}
	#two{
		margin-top: 170px;
	}
	#dp{
		width:15px;
		height: 15px;
	}
	#plk{
		display: none;
		margin:0 auto;
	}
	#dx{
		width:15px;
		height: 15px;
		margin-left:5px;
		margin-right: 5px;
		margin-bottom: -10px;
	}
	#dx1{
		width:15px;
		height: 15px;
		margin-left:5px;
		margin-right: 5px;
		margin-bottom: -10px;
	}
	#dx2{
		width:15px;
		height: 15px;
		margin-left:5px;
		margin-right: 5px;
		margin-bottom: -10px;
	}
	#dx3{
		width:15px;
		height: 15px;
		margin-left:5px;
		margin-right: 5px;
		margin-bottom: -20px;
	}
	#sj{
		width:20px;
		height: 20px;
		vertical-align: middle;
	}
	#fb{
		font-size: 15px;
	}
	#fxk{
		width:373px;
		height: 105px;
		border: 1px solid gray;
		display: none;
		margin-top: 30px;
		position: absolute;
		bottom: 0;
		background-color: #F5F5F5;
		border-radius: 5px;
	}
	details summary::-webkit-details-marker { display:none; };

    </style>
	<!--  angularjs的基础文件-->
	<script type="text/javascript" src="js/plugins/plugins/angularjs/angular.min.js"></script>
	<!--导入基础模块-->
	<script src="js/base.js"></script>
	<!--导入前端服务层JS-->
	<script src="js/service/msqbService.js"></script>
	<!--导入前端控制层JS-->
	<script src="js/controller/topicitemController.js"></script>
</head>
<body ng-app="msqbapp" ng-controller="topicitemController" ng-init="topicitemInit()">
	<div id="father">
		<div id="son">
			<p style="font-size: 20px;letter-spacing: 10px;">
				<a href="index.html?userId={{userBean.userId}}">&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{title}}&nbsp;&nbsp;
					<img src={{imgsrc}} alt="" id="dp" ng-click="testShouCang()" >
				<button onclick="testaa(this);" style="vertical-align: middle;" id="fx">分享</button></p>
			<p style="margin: 15px 5px;text-indent: 1em;">{{getTopic.topicContent}}<br></p>
				<div ng-if="getTopic.topicType==1">
					<!--判断题目类型 单选-->
					<p ng-repeat="timuxuanxiang in getTopicObject"><input type="radio" id="dx" name="one" value="1"><lable for="dx">{{timuxuanxiang}}</lable></p>
				</div>
				<div ng-if="getTopic.topicType==2">
					<!--判断题目类型 多选-->
					<p ng-repeat="timuxuanxiang in getTopicObject"><input type="checkbox" id="dx" name="one" value="1"><lable for="dx">{{timuxuanxiang}}</lable></p>
				</div>
				<div ng-if="getTopic.topicType==3">
					<!--判断题目类型 判断-->
					<p><input type="radio" id="dx" name="one" value="1"><lable for="dx">对</lable></p>
					<p><input type="radio" id="dx1" name="one" value="1"><lable for="dx">错</lable></p>
				</div>
			<details>
			  <summary ng-click="getAnswer(getTopic.topicId)"><p id="dj";style="vertical-align: middle;display: inline;">答案与解析<img src="img/三角形2.png" alt="" id="sj"></p></summary>
			  <p>{{answerObject.answerContent}}</p >
				<div ng-if="answerObject.answerCharacter!=null">
					<p style="color: red;">文字解析</p>
					<div>{{answerObject.answerCharacter}}</div>
				</div>
				<div ng-if="answerObject.answerVideo!=null">
					<p style="color: red;">视频讲解</p>
					<div>
						<video controls="controls" autoplay="autoplay" id=video1 width="375" style="margin-top:10px;text-align: center;">
							<source src="{{answerObject.answerVideo}}"
									type="video/mp4"/>
						</video>
					</div>
				</div>
				<div ng-if="answerObject.answerRelative!=null">
					<p style="color: red;">相关知识:</p>
					<div>
						<p ng-repeat="xiangDuan in xiangguanObject">{{xiangDuan}}</p>
					</div>
				</div>
			</details>
					<label for="one" ng-click="updateReadLogStatus(userId,topicId,1)"><input type="button" value="了解" name="one" style="margin-left: 40px;" onclick="findIndex()"></label>
					<label for="two" ng-click="updateReadLogStatus(userId,topicId,2)"><input type="button" value="掌握" name="two" onclick="findIndex()"></label>
					<label for="three" ng-click="updateReadLogStatus(userId,topicId,3)"><input type="button" value="熟练" name="three" onclick="findIndex()"></label>
					<label for="four" ng-click="updateReadLogStatus(userId,topicId,4)"><input type="button" value="精通" name="four" onclick="findIndex()"></label>
					<br>
					<a href=""><span>上一题</span></a>
					<a href="danxuanxiayiti.html"><span>下一题</span></a><br><br>
			<div>
				<p style="color: red">全部评论</p>
				<p ng-repeat="comment in commentBeanList">{{comment.commenter}}@{{comment.content}}</p>
			</div>


</div>
			<textarea cols="30" rows="1" id="pl" placeholder="请写下你的评论..." style="resize: none;display: block;margin:-25px auto;"></textarea>
			<div style="position: absolute;bottom: 0;">
			<textarea cols="50" rows="5" id="plk" placeholder="请写下你的评论..." ng-model="commentBean.commentContent" style="resize: none;display: none;margin:0 2px;"></textarea>
			<button id="fb" style="display: none;margin:5px auto;" ng-click="addComment()">发布</button></div>
		<div id="fxk">
			<p>请选择分享方式</p><br>
			<img src="img/wx.png" alt="" id="fxtp" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/pyq.png" alt="" id="fxtp1" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/qq.png" alt="" id="fxtp2" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/wb.png" alt="" id="fxtp3" style="width:30px;height: 30px;">
			<button style="width:40px;height: 30px;font-size: 15px;letter-spacing: 2px;margin-left: 130px;">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
			<span style="margin-left:0px;">微信&nbsp;&nbsp;朋友圈&nbsp;&nbsp;QQ&nbsp;&nbsp;&nbsp;&nbsp;微博</span>
		</div>

	</div>
</body>
<script type="text/javascript">
	var ndp=document.getElementById("dp");
	var sc=document.getElementById('sc');
	var pl=document.getElementById('pl');
	var lb=document.getElementsByTagName('input');
	var plk1=document.getElementById('plk');
	var fb=document.getElementById('fb');
	var fx=document.getElementById('fx');
	var fxk=document.getElementById('fxk');
	var dj=document.getElementById('dj');
	fxk.onclick=function(){
		fxk.style.display='none';
	}
	var b=false;
	dj.onclick=function(){
		if(!b){
			sj.src='img/三角形1.png';
			b=!b;
		}else if(b){
			sj.src='img/三角形2.png';
			b=!b;	
		}
	};
	fx.onclick=function(){
		fxk.style.display='block';
	}
	var ng1=document.getElementById('ng1');
	fb.onclick=function(){
		var plxs=document.getElementById('plxs');
		var plk=document.getElementById('plk').value;
		// plxs=plk;
		// console.log(plxs);
		if (plk.length !== 0) {
		plxs.innerHTML=plk;
		plk1.style.display='none';
		fb.style.display='none';
		pl.style.display='block';
		pl.innerText='已评论';
		ng1.style.display='block';
	}else{
		ng1.style.display='none';
		plk1.style.display='none';
		fb.style.display='none';
		pl.style.display='block';
	}
	}

	/*		var d=false;
    sc.onclick=function(){
            if (!b) {
                ndp.src="img/小星星2.png";
                b=!b;
            }else if(b){
            ndp.src="img/小星星.png";
            b=!b;}
        }
        ndp.onclick=function(){
            if (!b) {
                ndp.src="img/小星星2.png";
                b=!b;
            }else if(b){
            ndp.src="img/小星星.png";
            b=!b;}
        }*/
	pl.onclick=function(){
		plk.style.display='block';
		pl.style.display='none';
		fb.style.display='block';
	}
	function findIndex(arr,e){
            for(var i=0;i<arr.length;i++){
                if(arr[i]==e){
                    return i;
                }
                
            }
        }

        for(var i=0;i<lb.length;i++){
               lb[i].onclick = function(){
                   event.currentTarget.style.background="#99b3cc";
                   var oi = findIndex(lb,event.currentTarget);
                   for (var i = 0; i < lb.length; i++) {
                       if(i!=oi)
                          lb[i].style.background="#F5F5F5";
                   }                          
               }
        }
</script>
</html>